<template>
  <div>
    <van-row class="row row-header" justify="center">
      <van-col v-if="options.index" :span="options.indexSpan || 2">
        <div class="header">
          <span>#</span>
        </div>
      </van-col>
      <van-col
        v-for="(item, index) in options.column"
        :key="index"
        :span="item.span || 4"
      >
        <div
          :class="{
            header: true,
            'header-align-left': item.left ? item.left : false,
          }"
        >
          <span>{{ item.label }}</span>
        </div>
      </van-col>
      <van-col v-if="options.handle" :span="options.handleSpan || 4">
        <div class="header">
          <span>操作</span>
        </div>
      </van-col>
    </van-row>
    <van-row
      v-for="(item, index) in list"
      :key="item"
      class="row"
      justify="center"
    >
      <van-col v-if="options.index" :span="options.indexSpan || 2">
        <div class="column">
          <span>{{ 1 + index }}</span>
        </div>
      </van-col>
      <van-col
        v-for="(item2, index2) in options.column"
        :key="index2"
        :span="item2.span || 4"
      >
        <div class="column">
          <span>{{ item[item2.prop] }}</span>
        </div>
      </van-col>
      <van-col v-if="options.handle" :span="options.handleSpan || 4">
        <div class="column">
          <van-button size="mini" type="primary" @click="handleClick(item)">
            查看
          </van-button>
        </div>
      </van-col>
    </van-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface Props {
  list: Array<{
    [key: string]: any
  }>
  options: {
    index: boolean
    indexSpan: number
    handle: boolean
    handleSpan: number
    column: Array<{
      label: string
      prop: string
      span: number
      left: boolean
      right: boolean
    }>
  }
}

const props = defineProps<Props>()

const emits = defineEmits(['item'])

const handleClick = (item: any) => {
  emits('item', item)
}
</script>

<style lang="less" scoped>
.reserve-record {
  padding-top: 50px;
  margin-bottom: 50px;

  .row {
    margin-top: 8px;
    padding-top: 8px;
    color: #606266;
    border-top: 1px solid #e8eef5;

    .header {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      font-weight: bold;
    }

    .header-align-left {
      justify-content: flex-start;
    }

    .column {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
    }
  }

  .row-header {
    margin-top: 1px;
    padding-top: 5px;
  }
}
</style>
